*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ol,ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
img{
	border: none;
	vertical-align: bottom;
}
a{
	text-decoration: none;
}
html,body{
	width: 100%;
}
header{
    width: 100%;
    height: 90px;
    background: #fff;
    border-top: 5px solid #d51320;
    position: sticky;
    top: 0;
    z-index: 99;
}
header .header{
    width: 1150px;
    height: 55px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(149, 183, 247,.5);
}
header .header .left{
    width: 260px;
    height: 55px;
    float: left;
}
header .header .left .logo{
    float: left;
    width: 178px;
    height: 46px;
    margin-top: 5px;
    background: url(../img/spirit.png);
    background-position: -200px 0px;
    cursor: pointer;
}
header .header .left .ewm{
    margin-top: 3px;
    position: relative;
    width: 62px;
    height: 48px;
    float: right;
    background: url(../img/ewm-1.png) no-repeat center center;
    background-size: 48px 48px;
    cursor: pointer;
}
header .header .left .ewm:hover .code-content{
    display: block;
}
header .header .left .ewm span{
    position: absolute;
    height: 48px;
    width: 12px;
    font-size: 12px;
    left: 56px;
    line-height: 12.5px;
    top: 1px;
    color: #666666;
}
header .header .left .ewm .code-content{
    display: none;
    position: absolute;
    width: 400px;
    height: 110px;
    top: 48px;
    z-index: 2;
    background: #fff;
}
header .header .left .ewm .code-content .left-1{
    width: 200px;
    float: left;
}
header .header .left .ewm .code-content .left-1 i{
    float: left;
    width: 76px;
    height: 76px;
    border: 2px solid #7c8b94;
    margin-left: 8px;
    margin-top: 17px;
    margin-right: 10px;
}
header .header .left .ewm .code-content .left-1 i img{
    width: 100%;
    height: 100%;
}
header .header .left .ewm .code-content .left-1 a{
    float: left;
    width: 100px;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
}
header .header .left .ewm .code-content .left-1 a:nth-child(2){
    margin-top: 17px;
    color: red;
}

header .header .right{
    position: relative;
    width: 550px;
    height: 55px;
    float: right;
}
header .header .right .login{
    width: 128px;
    height: 55px;
    float: left;
}
header .header .right .login ul li a{
    color: #7c8b94;
}
header .header .right .login .one{
    position: relative;
    width: 180px;
    height: 55px;
    line-height: 55px;
    font-size: 14px;
    color: #7c8b94;
}
header .header .right .login .one span{
    float: left;
    position: absolute;
    width: 1px;
    height: 8px;
    background: #7c8b94;
    left: 130px;
    top: 23px;
}
header .header .right .login .one li:nth-child(1){
    cursor: pointer;
    width: 120px;
    float: left;
    text-align: right;
}
header .header .right .login .one li:nth-child(3){
    cursor: pointer;
    width: 40px;
    float: right;
    text-align: left;
}
// header .header .right .login .end li:nth-child(1){
//     width: 120px;
// }
// header .header .right .login .end li:nth-child(3){
//     width: 40px;
// }
header .header .right .nav{
    width: 372px;
    height: 55px;
    float: right;
}
header .header .right .nav .one{
    position: relative;
    width: 100%;
    height: 55px;
    line-height: 50px;
    font-size: 14px;
}
header .header .right .nav .one li a{
    color: #7c8b94;
}
header .header .right .nav .one>li{
    position: relative;
    float: left;
    width: 23%;
    text-align: center;
}
header .header .right .nav .one .pic-2{
    width: 26%;
}
header .header .right .nav .one .pic-1{
    width: 28%;
}
header .header .right .nav .one .pic i{
    font-size: 18px;
    color: #7c8b94;
}
header .header .right .shop{
    display: none;
    position: absolute;
    left: 182px;
    top: 45px;
    height: 99px;
    width: 99px;
}
header .header .right .shop .s{
    height: 99px;
    width: 99px;
    background: #fff;
    border: 1px solid #7c8b94;
}
header .header .right .shop .s>li{
    height: 33px;
    text-align: center;
    line-height: 33px;
    border-bottom: 1px solid #7c8b94;
}
header .header .right .shop .s li:nth-child(3){
    border-bottom: 0;
}
header .header .right .shop .s li a{
    color: #7c8b94;
    font-size: 14px;
} 
header .header .right .shop .s li:hover a{
        color: #d51320;
}
header .header .right .kefu{
    display: none;  
    position: absolute;
    left: 374px;
    top: 45px;
    height: 66px;
    width: 99px;
}
header .header .right .kefu .s{
    height: 66px;
    width: 99px;
    background: #fff;
    border: 1px solid #7c8b94;
}
header .header .right .kefu .s>li{
    height: 33px;
    text-align: center;
    line-height: 33px;
    border-bottom: 1px solid #7c8b94;
}
header .header .right .kefu .s li:nth-child(2){
    border-bottom: 0;
}
header .header .right .kefu .s li a{
    color: #7c8b94;
    font-size: 14px;
}
header .header .right .kefu .s li:hover a{
    color: #d51320;
}
header .header .right .login ul li:hover a {
    color: #d51320;
}
header .header .right .nav ul li:hover a {
    color: #d51320;
}

header .bottom{
    width: 1150px;
    height: 30px;
    // background: cornflowerblue;
    float: left;
    ul{
        height: 30px;
        li{
            position: relative;
            font-size: 14px;
            text-align: center;
            padding: 0 20px;
            float: left;
            line-height: 30px;
            text-transform: uppercase;
            transition: 0.5s;
            overflow: hidden;
            -webkit-box-reflect: below 1px linear-gradient(transition,#0003);
            a{
                color: #000;
                text-decoration: none;
            }
            
            &.ac{
                background: powderblue;
                a{
                    color: black;
                }
            }
            &:hover{
                background: #21ebff;
                color: #000;
                box-shadow: 0 0 50px #21ebff;
                transition-delay: 0.5s;
            }
            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 10px;
                border-top: 2px solid #21ebff;
                border-left: 2px solid #21ebff;
                transition: 0.5s;
            }
            &:nth-child(1){
                filter: hue-rotate(50deg);
            }
            &:nth-child(2){
                filter: hue-rotate(100deg);
            }
            &:nth-child(3){
                filter: hue-rotate(150deg);
            }
            &:nth-child(4){
                filter: hue-rotate(200deg);
            }
            &:nth-child(5){
                filter: hue-rotate(250deg);
            }
            &:nth-child(6){
                filter: hue-rotate(300deg);
            }
            &:nth-child(7){
                filter: hue-rotate(350deg);
            }
            &:hover::before{
                width: 100%;
                height: 100%;
                transition-delay: 0.5s;
            }
            &::after{
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                width: 10px;
                height: 10px;
                border-bottom: 2px solid #21ebff;
                border-right: 2px solid #21ebff;
                transition: 0.5s;
            }
            &:hover::after{
                width: 100%;
                height: 100%;
                transition-delay: 0.5s;
            }
        }
        
    }
} 